<template>
  <div class="page">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          组合式锚点
        </div>
      </template>
      <cy-anchor-group v-model="value1" :data='titleList' menuDirection="right" height="500"  > </cy-anchor-group>

      <!-- <AnchorGroup v-model="value1" :data='titleList' menuDirection="right" height="500"  > </AnchorGroup> -->
    </el-card>
    <div>{{ value1 }}</div>
    <el-card style="margin-top:10px" shadow="never">
      <template #header>
        <div class="card-header">
          简单锚点
        </div>
      </template>
      <AnchorMenu :data="titleList2" v-model="state.menuActive" ></AnchorMenu>
      <div>{{ state.menuActive }}</div>
    </el-card>

  </div>
</template>

<script setup>
import AnchorMenu from '_c/anchorMenu/index.vue'
import AnchorGroup from '_c/anchorGroup/index.vue'
import Comp from './comp.vue'
import { reactive,ref } from 'vue'
let value1=ref('Sewage')
const state = reactive({
  menuActive: '1'
})
const titleList = [
  {
    name: '排污许可基本信息',
    component: Comp,
    key: 'Sewage',
    attrs: {
      content: '#F4EAD5'
    },


  },
  {
    name: '排放口信息',
    component: Comp,
    key: 'Outlet',
    attrs: {
      content: 'rgba(0,255,0,0.02)'
    }
  },
  {
    name: '排污限值信息',
    component: Comp,
    key: 'emissionLimits',
    attrs: {
      content: 'rgba(0,0,255,0.02)'
    }
  },
  {
    name: '排污监测要求信息',
    component: Comp,
    key: 'sewageMonitoriRequire',
    attrs: {
      content: '#FFFBE9'
    }
  },
  {
    name: '环境管理台账',
    key: 'envParameter',
    component: Comp,
    attrs: {
      content: '#F4EAD5'
    }
  },
  {
    name: '建设项目影响评价及验收',
    key: 'envEvaluation',
    component: Comp,
    attrs: {
      content: 'rgba(0,0,255,0.02)'
    }
  },
  {
    name: '污水处理站档案资料',
    component: Comp,
    key: 'sewageInfo',
    attrs: {
      content: '#DAE2B6'
    }
  },
  {
    name: '环境管理制度',
    component: Comp,
    key: 'EnvSystem',
    attrs: {
      content: '#CCD6A6'
    }
  },
  {
    name: '环保管理运维人员',
    key: 'envPerson',
    component: Comp,
    attrs: {
      content: '#F4EAD5'
    },
    children: [
      {
        name: '组件1',
        key: 'zujian1',
        component: Comp,
        attrs: {
          content: '#F4EAD1'
        }
      },
      {
        name: '组件2',
        key: 'zujian2',
        component: Comp,
        attrs: {
          content: '#F4EAD2'
        },
        children: [
          {
            name: '组件3',
            key: 'zujian3',
            component: Comp,
            attrs: {
              content: '#F4EAD3'
            }
          },
        ]
      },

    ]
  },

]
const titleList2 = [
  {
    name: '排污许可基本信息',
    key: '1',
    attrs: {
      content: '#F4EAD5'
    },

  },
  {
    name: '排放口信息',
    key: '2',
    attrs: {
      content: 'rgba(0,255,0,0.02)'
    }
  },
  {
    name: '排污限值信息',
    key: '3',
    attrs: {
      content: 'rgba(0,0,255,0.02)'
    }
  },
  {
    name: '排污监测要求信息',
    key: '4',
    attrs: {
      content: '#FFFBE9'
    }
  },
  {
    name: '环境管理台账',
    key: '5',
    attrs: {
      content: '#F4EAD5'
    }
  },
  {
    name: '建设项目影响评价及验收',
    key: '6',
    attrs: {
      content: 'rgba(0,0,255,0.02)'
    },
    children: [
      {
        name: '污水处理站档案资料',
        key: '7',
        attrs: {
          content: '#DAE2B6'
        }
      },
      {
        name: '环境管理制度',
        key: '8',
        attrs: {
          content: '#CCD6A6'
        }
      }
    ]
  },

]

</script>

<style lang="scss" scoped>
.card-header {
  font-weight: 600;
}
</style>